<template>
    <PopUps :bgIndex="900" :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="auditDetails-box">
            <div class="content-box">
                <div class="auditDetails-content">
                  
                    <DetailTable @closePopUps="$emit('closePopUps')" :auditDataList="props.auditData" />
                    <div class="auditDetails-main">
                        <div class="title-h">
                            处理意见
                        </div>
                        <el-input class="opinioninput" v-model="opinion" :rows="2" type="textarea" placeholder="请输入处理意见" />
                    </div>
                    <div class="auditDetails-floor">
                        <div class="title-h">
                            审批人
                        </div>
                        <el-input v-model="approver" class="approver" placeholder="审批人" />
                    </div>
                </div>
                <div class="content-floor">
                    <el-button class="overrule" @click="overrule">驳回</el-button>
                    <el-button class="agree" @click="agree">同意</el-button>
                </div>
            </div>

            <el-dialog v-model="dialogVisible" :title="msgTitle" width="500">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <el-icon color="#FF8C23" size="22">
                            <WarningFilled />
                        </el-icon>
                        <p>{{ msgTitle }}</p>
                    </div>
                </template>

                <span>{{ msg }}</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="primary"
                            :class="msgTitle.slice(0, 2) == '通过' ? 'reviseBtn' : 'exportBtn'">
                            {{ msgTitle.slice(0, 2) }}
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </PopUps>
</template>
<script setup>
import { ref } from 'vue'
import DetailTable from '@/components/My/ProfitDetail/index.vue'
import { auditCheckApi } from '@/api/tickets/index.js'

import { ElMessage } from 'element-plus'
import PopUps from '@/components/My/PopUps';
const emit = defineEmits(['searchNewList'])
const props = defineProps(['auditData'])
// 处理意见
let opinion = ref('')
// 审批人
let approver = ref('')

// 提示标题
let msgTitle = ref('通过审核')
// 提示消息
let msg = ref('您确认审核通过此工单吗')
// 控制对话框
let dialogVisible = ref(false)
// 驳回
const overrule = () => {
    dialogVisible.value = true
    msgTitle.value = '驳回审核'
    msg.value = '您确认驳回此工单吗'
}
// 同意
const agree = () => {
    dialogVisible.value = true
    msgTitle.value = '通过审核'
    msg.value = '您确认审核通过此工单吗'
}
// 审核接口
const auditCheckApiFn = async (v) => {
    let params = {
        type: v,
        id: props.auditData.orderId,
        orderId: props.auditData.orderId,
        remarks: opinion.value
    }
    let res = await auditCheckApi(params)
}
// 
const primary = () => {
    if (msgTitle.value == "驳回审核") {
        if (opinion.value) {
            auditCheckApiFn('驳回')
            setTimeout(() => {
                emit('searchNewList')
                ElMessage.success('驳回成功')
            }, 500)
        } else {
            ElMessage.warning('请输入处理意见')
        }
    } else {
        auditCheckApiFn('审核通过')
        setTimeout(() => {
            emit('searchNewList')
            ElMessage.success('审核成功')
        }, 500)
    }
    dialogVisible.value = false
}

onMounted(() => {

})
</script>
<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.auditDetails-box {
    padding: 0 16px;

    :deep(.el-dialog) {
        padding: 10px 30px;
        cursor: pointer;
        box-sizing: border-box;

        .my-header {
            display: flex;
            align-items: center;
            padding: 0;

            p {
                font-weight: bolder;
                font-size: 18px;
            }
        }

        .el-dialog__title {
            font-weight: 600;
        }

        .el-dialog__body {
            span {
                font-size: 16px;
                text-align: center;
                width: 100%;
                display: block;
            }
        }

        .el-dialog__headerbtn {
            height: 50px;
            font-size: 22px;
        }
    }


    .content-box {
        padding: 10px;
        color: #333333;



        .auditDetails-content {
            .title-h {
                color: #1947FF;
                position: relative;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                &::after {
                    content: '';
                    width: 5px;
                    height: 20px;
                    background-color: #1947FF;
                    border-radius: 5px;
                    position: absolute;
                    left: -9px;
                    top: 4px;
                }
            }
        }

        .auditDetails-main {
            .title-h {
                margin: 19px 0;
            }

            .opinioninput {
                width: 800px;
                height: 121px;
                background: #FFFFFF;

                :deep(.el-textarea__inner) {
                    height: 100%;
                }
            }
        }

        .auditDetails-floor {
            .title-h {
                margin: 19px 0;
            }

            .approver {
                width: 198px;
                height: 40px;
            }
        }

        .content-floor {
            width: 100%;
            text-align: right;

            .overrule {
                width: 60px;
                height: 30px;
                background: #FF9898;
                box-shadow: 2px 3px 6px 1px rgba(0, 0, 0, 0.16);
                border-radius: 2px 2px 2px 2px;
                color: #FF0000;
            }

            .agree {
                width: 60px;
                height: 30px;
                background: #1947FF;
                box-shadow: 2px 3px 6px 1px rgba(0, 0, 0, 0.16);
                border-radius: 2px 2px 2px 2px;
                color: #fff;
            }
        }
    }
}</style>
